Попередня сторінка: 20. Створення сайтів
Наступна сторінка: 22. Графічні зображення та гіперпосила...
Текстові редактори мають інструменти для форматування. Як відбувається форматування гіпертексту для відображення у вікні браузера?
Поняття про мову HTML
Щоб браузер потрібним чином відображав дані на вебсторінках, застосовують спеціальні позначки — теги, сукупність яких разом із правилами їх використання називають мовою розмітки гіпертексту.
HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це набір тегів та правила їх застосування для створення гіпертекстових документів. HTML не є мовою програмування.
Таким чином, вебсторінка сайту являє собою текстовий документ, розмічений тегами HTML для відображення у вікні браузера.
HTML-документ
HTML-документ (HTML-файл) є текстовим документом, тому створити його можна в будь-якому текстовому редакторі, з яким ви працювали.
Тег — це позначка (мітка) мови HTML, записана в кутових дужках о, яку опрацьовує браузер.
Базову структуру HTML-документа визначають такі теги:
На рис. 21.1 наведно один із варіантів відображення вебсторінки.
Форматування тексту
Текст із тегами можна розташовувати довільно: розбивати на абзаци, виділяти відступи. У HTML-документі розмір і накреслення символів, які відображаються у вікні браузера, визначаються розміткою.
Теги мови HTML визначають вигляд і функціонування об’єктів на вебсторінці сайту.
Теги бувають парними і непарними. Парний тег складається із відкривального тегу і закривального тегу, який починається символом «/». Теги з помилками або такі, що не підтримуються браузером, ігноруються.
<Ь»...</Ь> — парний тег накреслення жирний (рис. 21.2). <br> або <br/> — непарний тег розриву рядка.
Розглянемо деякі теги форматування тексту:
Тег може містити атрибути, значення яких впливають на його дію. Атрибути записуються у відкривальному тегу після його назви.
Значення атрибутів, що містять пропуски, беруть в одинарні або подвійні лапки. Для решти значень це не обов’язково.
Застосуємо атрибути text (колір тексту) і bgcolor (колір тла) (рис. 21.3):
Розглянемо приклад застосування атрибутів на рис. 21.4.
Марковані та нумеровані списки
Для створення маркованого списку використовують тег <ul>...</ul> з атрибутом type, який задає вигляд маркера:
Для створення нумерованих списків використовують тег <оі>...</оі> з атрибутами type (тип нумерації: "1" — арабські цифри, "А" — латинські літери, "І" — римська нумерація тощо) і start (задання початкового номера в списку арабськими цифрами).
Елементи списку розмічають тегами <1і>...</1і> (рис. 21.5).
Питання для самоперевірки
1. Що таке HTML?
2. Що таке тег? Наведіть приклади парних і непарних тегів.
3. Назвіть складові базової структури HTML-документа
4. Що таке атрибут тегу?
5. Якими засобами HTML можна змінити колір тла вебсторінки?
6. Які теги використовують для створення списків?
Вправа 21
Створити HTML-документ із відформатованим текстом.
1) Запустіть текстовий редактор Блокнот і введіть у документ набір тегів базової структури HTML-документа (див. рис. 21.1).
2) Збережіть створений документ як HTML-файл: Файл —»• Зберегти як —>• Тип файлу (всі файли) —*• Ім'я: Вправа 21.html.
3) Відкрийте папку зі збереженим файлом і за допомогою браузера відкрийте HTML-файл Вправа 21.
4) Змініть HTML-код так, щоб нумерований список відображався на синьому тлі, колір шрифта — жовтий, тип накреслення — жирний (рис. 21.6).
5) Збережіть файл Вправа 21.html і оновіть сторінку браузера.
6) За потреби відкоригуйте HTML-код відповідно до п. 4.
Комп'ютерне тестування
Виконайте тестове завдання 21 із автоматичною перевіркою результату.
Це матеріал з підручника Інформатика 8 клас Бондаренко (2021)
Наступна сторінка: 22. Графічні зображення та гіперпосила...